<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
            placeholder="菜单搜索"
            v-model="query.name"
            prefix-icon="el-icon-search"
          ></el-input
        ></el-col>
        <el-col :span="3">
          <el-select v-model="query.status" placeholder="状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="3">
          <el-select v-model="query.type" placeholder="类型">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-col>
        <!-- 增删改按钮区域 -->
        <el-tooltip
          class="item"
          effect="light"
          content="增加菜单"
          placement="top"
        >
          <el-button
            type="primary"
            icon="el-icon-edit-outline"
            circle
            @click="editDialogFormVisible = true"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="light"
          content="查找菜单"
          placement="top"
        >
          <el-button
            icon="el-icon-search"
            circle
            @click="getMenuList()"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          class="item"
          effect="dark"
          content="批量删除菜单"
          placement="top"
        >
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleMenuList()"
          ></el-button>
        </el-tooltip>
      </el-row>
      <!-- 菜单列表区域 -->
      <div class="usertable">
        <el-table
          :data="menuList"
          border
          style="width: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          @selection-change="handleSelectionChange"
          ref="idList"
        >
          <el-table-column type="selection" width="60"> </el-table-column>
          <el-table-column type="index" width="60" label="序号">
          </el-table-column>
          <el-table-column prop="name" label="菜单名称" width="150">
          </el-table-column>
          <el-table-column
            prop="parentid"
            label="上级菜单"
            width="150"
            :formatter="turnparentid"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            label="菜单类型"
            width="120"
            :formatter="turntype"
          >
          </el-table-column>
          <el-table-column prop="url" label="菜单地址" width="160">
          </el-table-column>
          <el-table-column
            prop="start"
            label="状态"
            width="100"
            :formatter="turnstat"
          >
            <template slot-scope="scope">
              <el-switch
                active-value="1"
                inactive-value="0"
                v-model="scope.row.start"
                @change="editliststat(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="right" label="操作" width="140">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="small"
                @click="openaddMenu(scope.row)"
                plain
                icon="el-icon-edit"
              ></el-button>
              <el-button
                @click="menuDele(scope.row.id)"
                type="danger"
                size="small"
                plain
                 icon="el-icon-delete"
                ></el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="query.size"
            :current-page="query.ipage"
            layout="sizes, prev, pager, next"
            :total="query.total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 增加菜单区域 -->
    <div>
      <el-dialog
        title="增加菜单:"
        :visible.sync="editDialogFormVisible"
        class="dialog"
        @close="editDialogClosed()"
      >
        <el-form :model="addmenu" ref="editPartListRef" label-width="90px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="partnum">
                <el-input v-model="addmenu.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="父级菜单:" prop="partname">
                <el-select v-model="addmenu.parentid" placeholder="类型">
                  <el-option
                    v-for="item in fatherList"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="地址" prop="startdate">
                <el-input v-model="addmenu.url"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="类型:" prop="losedate">
            <el-radio v-model="addmenu.type" label="0">菜单</el-radio>
            <el-radio v-model="addmenu.type" label="1">目录</el-radio>
            <el-radio v-model="addmenu.type" label="2">功能</el-radio>
          </el-form-item>
          <el-form-item label="状态:">
            <el-radio v-model="addmenu.start" label="1">有效</el-radio>
            <el-radio v-model="addmenu.start" label="0">无效</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addmenus()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 修改菜单区域 -->
    <div>
      <el-dialog
        title="修改菜单:"
        :visible.sync="updataFormVisible"
        class="dialog"
      >
        <el-form :model="updatamenu" ref="updataPartListRef" label-width="90px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="partnum">
                <el-input v-model="updatamenu.name"></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="父级菜单:" prop="partname">
                <el-select
                  v-model="updatamenu.parentid"
                  placeholder="类型"
                  :disabled="isdisabled"
                >
                  <el-option
                    v-for="item in fatherList"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select> </el-form-item
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="地址" prop="startdate">
                <el-input v-model="updatamenu.url"></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-form-item label="类型:" prop="losedate">
            <el-radio v-model="updatamenu.type" label="0" @change="yesDisabled"
              >菜单</el-radio
            >
            <el-radio v-model="updatamenu.type" label="1" @change="isDisabled"
              >目录</el-radio
            >
            <el-radio v-model="updatamenu.type" label="2" @change="isDisabled"
              >功能</el-radio
            >
          </el-form-item>
          <el-form-item label="状态:">
            <el-radio v-model="updatamenu.start" label="1">有效</el-radio>
            <el-radio v-model="updatamenu.start" label="0">无效</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updataFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updatemenu()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      //修改菜单表格
      updatamenu: {},
      updataFormVisible: false,
      //父级菜单
      fatherList: [],
      editDialogFormVisible: false,
      //是否显示父级菜单
      isdisabled: true,
      //增加菜单表格
      addmenu: {
        id: null,
        menu: null,
        name: "",
        parentid: "",
        start: "",
        type: "",
        url: "",
      },
      query: {
        name: "",
        status: "",
        type: "",
        ipage: 1,
        size: 5,
        total: 0,
      },
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "1",
          label: "有效",
        },
        {
          value: "0",
          label: "无效",
        },
      ],
      status: "",
      options2: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "菜单",
        },
        {
          value: "1",
          label: "目录",
        },
        {
          value: "2",
          label: "功能",
        },
      ],
      listtap: "",
      //表格区域
      listmanagetable: [],
      //表格数据
      menuList: [],
      //多选删除
      deleList: [],
    };
  },
  created() {
    this.getMenuList();
    this.getPartList();
  },
  methods: {
    //获取菜单列表
    getMenuList() {
      //console.log(this.query);
      this.$axios
        .get("/menu/select", {
          params: this.query,
        })
        .then((res) => {
          console.log(res);
          this.menuList = res.data.res.records;
          this.query.total = res.data.res.total;

          //console.log(this.query);
        });
    },
    //获取修改菜单数据
    openaddMenu(row) {
      console.log(row);
      this.updatamenu = row;
      this.updataFormVisible = true;
    },
    //修改菜单
    updatemenu() {
      this.$axios.post("/menu/updatamenu", this.updatamenu).then((res) => {
        this.$message.success("修改成功");
        this.updataFormVisible = false;
      });
    },
    //修改菜单状态
    editliststat(row) {
      this.$axios.post("/menu/updatamenu", row).then((res) => {
        console.log(res);
        if (res.status !== 200) {
          this.$message.error("修改用户状态失败");
        } else {
          this.$message.success("修改用户状态成功");
        }
      });
    },
    //设置父级菜单是否可以操作
    isDisabled() {
      this.isdisabled = false;
    },
    yesDisabled() {
      this.isdisabled = true;
    },
    //增加菜单
    addmenus() {
      this.$axios.post("/menu/addmenu", this.addmenu).then((res) => {
        if (res.status == 200) {
          console.log(res);
          this.editDialogFormVisible = false;
          this.getMenuList();
          this.$message.success("增加菜单成功");
        } else {
          this.$message.error("增加菜单失败");
        }
      });
    },
    handleSizeChange(newSize) {
      this.query.size = newSize;
      this.getMenuList();
    },
    //监听 页码改变
    handleCurrentChange(newCurrent) {
      this.query.ipage = newCurrent;
      this.getMenuList();
    },
    //获取父级菜单
    getPartList() {
      this.$axios.get("/menu/getpart").then((res) => {
        //console.log(res);
        this.fatherList = res.data.res;
      });
    },
    //删除菜单
    menuDele(id) {
      this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.get("/menu/dele?id=" + id).then((res) => {
            if (res.status == 200) {
              this.$message.success("删除成功");
              this.getMenuList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //批量删除菜单
    deleMenuList() {
      console.log(this.deleList);
      var idlist = [];
      this.deleList.forEach((iteam) => {
        idlist.push(iteam.id);
      });
      console.log(idlist);
      this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios.post("/menu/delelist", idlist).then((res) => {
            if (res.status == 200) {
              console.log(res);
              this.$message.success("删除成功");
              this.query.size = 5;
              this.query.ipage = 1;
              this.getMenuList();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(id) {
      this.deleList = id;
      console.log(this.deleList);
    },
    //转换状态类型
    turnstat(row) {
      if (row.start == "0") {
        return "无效";
      } else if (row.start == "1") {
        return "有效";
      }
    },
    turntype(row) {
      if (row.type == "0") {
        return "菜单";
      } else if (row.type == "1") {
        return "目录";
      } else if (row.type == "2") {
        return "功能";
      }
    },
    turnparentid(row) {
      var name;
      this.fatherList.forEach((iteam) => {
        if (row.parentid == iteam.id) {
          //console.log(this.fatherList)
          //console.log(iteam)
          //console.log(iteam.name);
          name = iteam.name;
        }
      });
      return name;
    },
  },
};
</script>

<style lang="less" scoped>
span {
  font-size: 12px;
}

.el-button {
  position: relative;
  margin-left: 10px;
}

.el-table-column {
  text-align: center;
}

.usertable {
  margin-top: 20px;
}

.block {
  margin-top: 20px;
}
</style>
